<template>
  <div class="traffic">
    <el-row :gutter="20">
      <!-- 1、添加div标签作为地图容器，同时为该div指定id属性 -->
      <el-col :span="16"><div id="container"></div></el-col>
      <!-- 2、侧边栏目 -->
      <el-col :span="8" class="aside">
        <!-- <div id="scenery_panel" style="width: 100px; height: 100px"></div> -->

        <el-tabs v-model="activeName">
          <el-tab-pane
            :label="item.title"
            :name="item.name"
            v-for="(item, index) in trafficTab"
            :key="index"
          >
            <div :id="item.classname"></div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 默认显示，与name对应
      activeName: "1",
      trafficTab: [
        { name: "1", title: "景点", classname: "scenery_panel" },
        { name: "2", title: "交通", classname: "traffic_panel" },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },
  // 接收数据
  props: {
    data: {
      type: Object,
      // default: {}
      default() {
        return {};
      },
    },
  },
  mounted() {
    window.onLoad = () => {
      // 3、地图加载完毕的回调函数
      // 3.1创建一个地图实例
      var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [this.data.location.longitude, this.data.location.latitude], //中心点坐标
        zoom: 15,
      });
      // 搜周边功能实现--风景名胜
      AMap.service(["AMap.PlaceSearch"], () => {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
          type: "风景名胜", // 兴趣点类别
          pageSize: 5, // 单页显示结果条数
          pageIndex: 1, // 页码
          city: this.data.real_city, // 兴趣点城市
          citylimit: true, //是否强制限制在设置的城市内搜索
          map: map, // 展现结果的地图实例
          panel: "scenery_panel", // 结果列表将在此容器中进行展示。
          autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        var cpoint = [
          this.data.location.longitude,
          this.data.location.latitude,
        ]; //中心点坐标
        console.log(cpoint);
        console.log(cpoint);
        placeSearch.searchNearBy("", cpoint, 2000, function (
          status,
          result
        ) {});
      });
      // 搜周边功能实现--交通
      AMap.service(["AMap.PlaceSearch"], () => {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
          type: "交通设施服务", // 兴趣点类别
          pageSize: 5, // 单页显示结果条数
          pageIndex: 1, // 页码
          city: this.data.real_city, // 兴趣点城市
          citylimit: true, //是否强制限制在设置的城市内搜索
          map: map, // 展现结果的地图实例
          panel: "traffic_panel", // 结果列表将在此容器中进行展示。
          autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        var cpoint = [
          this.data.location.longitude,
          this.data.location.latitude,
        ]; //中心点坐标
        console.log(cpoint);
        console.log(cpoint);
        placeSearch.searchNearBy("", cpoint, 2000, function (
          status,
          result
        ) {});
      });

      // 信息窗体
      //构建信息窗体中显示的内容
      var info = [];
      info.push("<div class='input-card content-window-card'><div></div> ");
      info.push(
        `<div style="padding:7px 0px 0px 0px;"><h4>${this.data.name}</h4>`
      );
      info.push(
        `<p class='input-item'>电话 : ${this.data.phone}   邮编 : 100102</p>`
      );
      info.push(
        `<p class='input-item'>地址 : ${this.data.address} </p></div></div>`
      );

      var infoWindow = new AMap.InfoWindow({
        content: info.join(""), //使用默认信息窗体框样式，显示信息内容
      });

      infoWindow.open(map, map.getCenter());
    };
    // 2、加载高德地图库
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=d3826634de1e303f41ba3891b151e54c&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },
};
</script>

<style lang="less" scoped>
.traffic {
  height: 400px;
  margin-bottom: 35px;
  #container {
    width: 650px;
    height: 400px;
  }
  .traffic_cate {
    display: flex;
    justify-content: space-around;
    align-items: center;
    > li {
      flex: 1;
      height: 30px;
      border: 1px solid #ccc;
      text-align: center;
    }
  }
  .aside {
    height: 400px;
  }
  /deep/.amap_lib_placeSearch_ul {
    height: 313px;
    overflow: auto;
  }
}
</style>